//  获取div节点对象
let ele = document.getElementById("app");
console.log(ele)
// 获取div中的内容  只能识别文本
let info = ele.innerText;
console.log(info)

// 获取div中的内容  可以识别html标签
let innerHTML = ele.innerHTML;
console.log(innerHTML)


// 写入内容到div
// ele.innerText = '<span>原生js的操作</span>'
ele.innerHTML = '<span>原生js的操作</span>'

// 获取button的节点对象
let elementsByTagName = document.getElementsByTagName("button");
// let elementById = document.getElementById("btn");
console.log(elementsByTagName)
//  js对象   jquery对象区别    $('#app')
elementsByTagName[0].onclick = function (){
    // 改变div中文字的颜色
    ele.style.color='green'
    ele.style.fontSize = '30px'
}

//  通过发送http请求 获取了一个用户信息列表

let  users = [
    {
        id:1,
        username:"tom",
        sex:'男',
        age:20
    },
    {
        id:2,
        username:"tom2",
        sex:'男',
        age:20
    }
]


//  如何将以上数组中的用户信息渲染到表格中
let tbd = document.getElementById("table-data");
// 遍历数组
users.forEach(user=>{
    // 创建tr节点对象
    let tr = document.createElement("tr");
    // 遍历 user对象  创建td节点对象
    for (let key in user) {
        // 创建td节点对象
        let td= document.createElement("td");
        td.innerText = user[key]
        tr.appendChild(td)
    }

    tbd.appendChild(tr)
})


//  编程方式   1. 命令式编程   2. 声明式编程
// jsp      ${username}  tom     vue.js



